<template>
	<view class="orderDetails">
		<tui-navigation-bar   :titleSize="18" :titleLineHeight="18" :titlefontWeight="800" :isOpacity="false" @init="initNavigation" title="订单详情" backgroundColor="#fff" color="#000">
			<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
				<tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
			</view>
		</tui-navigation-bar> 
		 <view class="orderDetails_content"  :style="{ marginTop: marginTp + 'px' }">
			 <!-- 倒计时 -->
			 <view class="content_hader">
				 <view class="hader_lt">
					 <view class="lt_Title">
						 <text v-if="status*1===1">邀约中</text>
						 <text v-else-if="status*1===2">已确认</text>
						 <text v-else-if="status*1===3">服务中</text>
						 <text v-else-if="status*1===4">待评价</text>
						 <text v-else>已完成</text>
					 </view>
					 <!-- <view class="lt_time"><text>还剩1小时15分钟结束</text></view> -->
				 </view> 
					<image class="hader_rt" v-if="status*1===1"  src="/static/user/my/icon_yaoyuezhong@2x.png"></image> 
					<image class="hader_rt" v-else-if="status*1===2"  src="/static/user/my/icon_yiqueren@2x.png"></image> 
					<image class="hader_rt" v-else-if="status*1===3"  src="/static/user/my/icon_fuwuzhong@2x.png"></image> 
					<image class="hader_rt" v-else-if="status*1===4"  src="/static/user/my/icon_daipingjia@2x.png"></image> 
					<image class="hader_rt" v-else  src="/static/user/my/icon_yiwancheng@2x.png"></image> 
			 </view> 
			 <!-- 信息 -->
			 <view class="content_info">
				 <view class="info_item">
					 <view class="item_left">
						 <text>商家名称</text>
					 </view>
					 <view class="item_right">
						 <text>{{inviteMerchant.merchantName}}</text>
					 </view>
				 </view>
				 <view class="info_item" style="padding-top: 30rpx;">
						 <view class="item_left">
							 <text>球房位置</text>
						 </view>
						 <view class="item_right">
							 <text>{{inviteMerchant.address}}</text>
						 </view>
				 </view>
				 <view class="info_item"  style="padding-top: 30rpx;">
						 <view class="item_left">
							 <text>球房电话</text>
						 </view>
						 <view class="item_right">
							 <text>{{inviteMerchant.phoneNumber}}</text>
						 </view>
				 </view>
			 </view>
			 <!-- 教练 -->
			 <view class="content_tutor"> 
			 	 <view class="content">
			 		<view class="content_lt">
			 			 <image v-if="orderDetails.assistant" class="image" :src="ossUrl+orderDetails.assistant.masterImg"></image>
			 		</view>
			 		<view class="content_rt" v-if="orderDetails.assistant">
			 			<view class="tp">
			 				<view class="tp_lt">
			 					<text>{{orderDetails.assistant.assistantName}}</text>
			 					 <image style="width: 36rpx;height: 36rpx;padding-left: 20rpx;padding-top: 6rpx;" src="/static/user/icon_chu.png"></image>
			 				</view>
			 				<text class="tp_rt">￥{{orderDetails.assistant.rates}}/小时</text>
			 			</view>
			 			<view class="ct">
			 				<text class="ct_lt">{{orderDetails.assistant.categoryName}}</text>  
							<text class="ct_rt">距离:{{orderDetails.ordersVo&&orderDetails.ordersVo.distance || 0}}km</text>
			 			</view>
			 			<view class="bt">
			 				<text>￥{{orderDetails.assistant.rates}}/小时</text>
			 			</view>
			 		</view> 
			 	 </view>
				 <view class="flex align-center justify-between mx-2 fs-24 ft777777 mb-1">
				 	<text>车程计价{{orderDetails.ordersVo&&orderDetails.ordersVo.transportFeeUnitPrice||0}}元/km</text>
				 	<view class="ft333333 flex align-center">车费：<text
				 			class="ft63d6d3 font-weight-bold fs-28">￥{{orderDetails.ordersVo&&orderDetails.ordersVo.transportFee || 0}}</text>
				 	</view>
				 </view>
			 	 <view class="bottom"> 
			 		<view class="total"><text>合计:</text><text class="totalPrice">￥{{orderDetails.ordersVo&&orderDetails.ordersVo.actualAmount}}</text></view>
			 	 </view>
			 </view>
			 <!-- 下单时间 -->
			 <view class="order_numTime">
				 <view class="info_item" >
						 <view class="item_left">
							 <text>订单号</text>
						 </view>
						 <view class="item_right"> 
							<text>{{orderDetails.ordersVo.id}}</text>
							<tui-icon margin="4rpx" size="20"   name="order"></tui-icon>
						 </view>
				 </view>
				 <view class="info_item"  style="padding-top: 30rpx;">
						 <view class="item_left">
							 <text>下单时间</text>
						 </view>
						 <view class="item_right"> 
							<text>{{orderDetails.ordersVo.orderTime}}</text> 
						 </view>
				 </view>
			 </view>
		 </view>
		 <!-- 底部操作栏 -->
		 <view class="orderDetails_footer">
			 <!-- <tui-form-button @click="clickOrder(orderDetails.ordersVo,'支付')" margin="0 0 0 20rpx" v-if="status*1===2" width="160rpx" size="28" height="60rpx" background="#63d6d3" radius="100rpx">立即支付</tui-form-button>
			 <tui-form-button @click="clickOrder(orderDetails.ordersVo,'取消订单')" margin="0 0 0 20rpx" v-if="status*1===1||status*1===2" width="160rpx" size="28" height="60rpx" plain background="#63d6d3" color="#63d6d3" radius="100rpx">取消订单</tui-form-button>
			 <tui-form-button @click="clickOrder(orderDetails.ordersVo,'一件续费')" margin="0 0 0 20rpx"  v-if="status*1===3" width="160rpx" size="28" height="60rpx" plain background="#63d6d3" color="#63d6d3" radius="100rpx">一件续费</tui-form-button>
			 <tui-form-button @click="clickOrder(orderDetails.ordersVo,'联系教练')" margin="0 0 0 20rpx" v-if="status*1===1 || status*1===2  || status*1===3" width="160rpx" size="28" height="60rpx" background="#63d6d3" radius="100rpx">联系教练</tui-form-button>
			 <tui-form-button @click="clickOrder(orderDetails.ordersVo,'删除订单')" margin="0 0 0 20rpx" v-if="status*1===5||status*1===4" width="160rpx" size="28" height="60rpx" plain background="#63d6d3" color="#63d6d3" radius="100rpx">删除订单</tui-form-button>
			 <tui-form-button @click="clickOrder(orderDetails.ordersVo,'立即评价')" margin="0 0 0 20rpx" v-if="status*1===4" width="160rpx" size="28" height="60rpx" background="#63d6d3" radius="100rpx">立即评价</tui-form-button>  -->
		 </view>
		 <tutor-renew-popup :visible="isVisible" @alterVisible="alterVisible"></tutor-renew-popup>
	</view>
</template>

<script>  
	import { getOrderDetails } from "@/http/api/order/order.js"
	export default {
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				marginTp: 0, 
				isVisible:false,
				inviteMerchant:{},
				status:null,//状态
				orderDetails:{
					ordersVo:{},
					assistant:{}
				},//订单详情
				ossUrl:getApp().globalData.ossurl,//图片前缀
			}
		},
		onLoad(options) { 
			if(options){
				getOrderDetails(options.orderId).then(res=>{
					console.log(res.data)
					if(res.code===200){
						this.orderDetails=res.data
						this.inviteMerchant=res.data.invite&&res.data.invite.inviteMerchant || {}
						this.status=res.data.ordersVo&&res.data.ordersVo.status || null
					}
				})
			}
		},
		methods: {  
			initNavigation(e) {
				this.top = e.top;
				this.marginTp = e.height
			},
			back() {
				uni.navigateBack({
							        delta: 1
							    });;
			},
			alterVisible(value){
				this.isVisible=value
			},
			//操作
			orderClick(data,type){ 
				switch (type) {
					case '支付': {
						console.log("支付");
						break;
					}
					case "取消订单": {
						console.log("取消订单");
						break;
					}
					case "一件续费": {
						this.isVisible=true
						console.log("一件续费");
						break;
					}
					case "联系教练": {
						console.log("联系教练");
						if(!data.assistant.phoneNumber){
							this.$utils.toast('教练电话不能为空')
							return
						}
						uni.makePhoneCall({
								phoneNumber: data.assistant.phoneNumber, // 替换为实际要拨打的电话号码
								success(res) {
								  console.log('拨打电话成功', res);
								},
								fail(err) {
								  console.error('拨打电话失败', err);
								}
							});
						break;
					}
					case "删除订单": {
						console.log("删除订单");
						break;
					}
					default: {
						console.log("立即评价");
						uni.navigateTo({
							url:'/pages/tutorControl/modules/pushEvaluate/pushEvaluate?orderId='+data.id
						})
						break;
					}
				} 
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './orderItemDetails.scss';
</style>